<template>
    <div class="container">
        <div class="sidebar">
            <ul class="menu">
                <router-link v-for="(item, index) in menuItems" :key="item.route" :to="item.route" custom
                    v-slot="{ navigate }">
                    <li class="menu-item" :class="{ 'active': isActive(index, item.route) }"
                        @click="() => { navigate(); setActiveSubNav(index) }">
                        <a href="#" class="menu-link" @click.prevent>
                            <img class="menu-icon icon-default" :src="getIcon(item.icon)" :alt="item.text">
                            <img class="menu-icon icon-active" :src="getIcon(item.activeIcon)" :alt="item.text">
                        </a>
                        <span class="menu-text">{{ item.text }}</span>
                    </li>
                </router-link>
            </ul>
        </div>

        <div class="content">
            <router-view />
        </div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { useSidebarStore } from '../../stores/sidebar'

const MODULE_KEY = 'consulting'
const route = useRoute()
const sidebarStore = useSidebarStore()


const menuItems = [
    {
        text: '我的客户',
        icon: 'my-customers.svg',
        activeIcon: 'my-customers-active.svg',
        route: '/consulting/customer'
    },
    {
        text: '笔记代码',
        icon: 'notes.svg',
        activeIcon: 'notes-active.svg',
        route: '/consulting/note-code'
    },
    {
        text: '班级情况',
        icon: 'class-manage.svg',
        activeIcon: 'class-manage-active.svg',
        route: '/consulting/class'
    }
]

const getIcon = (iconName) => {
    return new URL(`../../assets/consultant/${iconName}`, import.meta.url).href
}

const isActive = (index, menuRoute) => {
    const storeIndex = sidebarStore.getActiveSubNavIndex(MODULE_KEY)
    const moduleConfig = sidebarStore.availableNavConfigs.find(c => c.key === MODULE_KEY)
    const parentRoute = sidebarStore.getParentRoute(route.path, moduleConfig)
    return storeIndex === index || parentRoute === menuRoute
}

const setActiveSubNav = (index) => {
    const moduleConfig = sidebarStore.availableNavConfigs.find(c => c.key === MODULE_KEY)
    const setter = moduleConfig?.secondLevel.setter
    if (setter && sidebarStore[setter]) {
        sidebarStore[setter](index, menuItems[index].route)
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.sidebar {
    width: 120px;
    height: 100%;
    border-right: 1px solid #E9EAF2;
}

.content {
    flex: 1;
    min-width: 800px;
    padding: 20px 20px 0 20px;
}

.menu {
    padding: 33px 10px 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-item {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
    cursor: pointer;
}

.menu-item:hover,
.menu-item.active {
    color: #207FFC;
}

.menu-item:hover::before,
.menu-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #207FFC;
    border-radius: 6px;
    opacity: 0.1;
}

.menu-link {
    height: 18px;
    display: flex;
    align-items: center;
    position: relative;
}

.menu-icon {
    width: 16px;
    height: 16px;
    transition: opacity 0.2s;
}

.icon-default {
    opacity: 1;
}

.icon-active {
    position: absolute;
    left: 0;
    opacity: 0;
}

.menu-item:hover .icon-default,
.menu-item.active .icon-default {
    opacity: 0;
}

.menu-item:hover .icon-active,
.menu-item.active .icon-active {
    opacity: 1;
}

.menu-text {
    font-size: 13px;
    font-weight: 400;
    color: #333;
    line-height: 18px;
}

.menu-item:hover .menu-text,
.menu-item.active .menu-text {
    color: #207FFC;
}
</style>